<template>
  <div class="header-container">
    <nav-bar :title="'我的'"></nav-bar>
  </div>
  <div class="main-container">
    <van-skeleton title avatar :row="3" :loading="skeletonLoading">
      <div class="user-info">
        <van-row>
          <van-col span="8">
            <div class="user-info-avatar-container">
              <van-image
                class="user-info-avatar"
                round
                width="100%"
                height="100%"
                :src="current.avatarUrl"
              >
              </van-image>
            </div>
          </van-col>
          <van-col span="16">
            <div class="user-info-description">
              <div>昵称：{{ current.nickname }}</div>
              <div>登录名：{{ current.username }}</div>
              <div class="van-multi-ellipsis--l2" title="{{current.sign}}">
                个性签名：{{ current.sign }}
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-skeleton>
    <van-cell-group>
      <van-cell title="我的订单" is-link @click="navigate('/order')" />
      <van-cell title="账号管理" is-link @click="navigate('/account')" />
      <van-cell title="地址管理" is-link @click="navigate('/address')" />
      <van-cell title="关于我们" is-link @click="navigate('/about')" />
    </van-cell-group>
  </div>
  <div class="footer-container">
    <tab-bar activeItem="mine" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavBar from "@/components/NavBar.vue";
import TabBar from "@/components/TabBar.vue";
import { useRouter } from "vue-router";
import UmsMember from "@/entity/UmsMember";
import authService from "@/services/auth.service";
import { AxiosError } from "axios";
import { Toast } from "vant";

type StateType = {
  current: UmsMember | null;
  skeletonLoading: boolean;
};

export default defineComponent({
  components: {
    NavBar,
    TabBar,
  },
  setup() {
    const router = useRouter();
    const state = reactive<StateType>({
      current: new UmsMember(),
      skeletonLoading: false,
    });

    onMounted(async () => {
      load();
    });

    const load = async () => {
      try {
        state.skeletonLoading = true;
        const current = await authService.current();
        state.current = current;
      } catch (e) {
        if (e instanceof AxiosError && e.response?.status == 401) {
          Toast.fail("请先登录");
          router.push("/login");
          return;
        }
        Toast.fail("加载失败");
        throw e;
      } finally {
        state.skeletonLoading = false;
      }
    };

    const navigate = (path: string) => {
      router.push(path);
    };

    return {
      ...toRefs(state),
      navigate,
    };
  },
});
</script>

<style scoped>
.user-info {
  margin: 0 10px;
  height: 115px;
  background-color: #ff5454;
  /* background: linear-gradient(90deg, var(--van-primary-color), #51c7c7); */
  /* box-shadow: 0 2px 5px #269090; */
  border-radius: 6px;
}
.user-info-avatar-container {
  padding: 20px;
}
.user-info-avatar {
}
.user-info-description {
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--van-white);
  display: flex;
  flex-direction: column;
}
</style>
